<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		 * {margin: 0;padding:0;}
		  body {background:black;margin-top: 80px;}
		  .mod {
		  	width:356px;
		  	height:512px;
		  	margin:auto;
		  	position: relative;
		  	background: url(loading.png) no-repeat;
		  	background-size: 356px 512px;
		  }
		  .mod div {position: absolute;background: url(steps.png) no-repeat;background-size: 800px 1750px;}
	      .steps1 {
	      	width:85px;
	      	height: 114px;
	      	left: 45px;
	      	bottom:116px;
	      	-webkit-animation:steps1 1s step-end infinite;
	      }
	      .steps2 {
	      	width:45px;
	      	height: 62px;
	      	left: 138px;
	      	bottom:124px;
			-webkit-animation:steps2 600ms step-end infinite;
	      }
	      .steps3 {
	      	width:45px;
	      	height: 62px;
	      	left: 182px;
	      	bottom:116px;
			-webkit-animation:steps3 220ms step-end infinite;
	      }
	      .steps4 {
	      	width:45px;
	      	height: 69px;
	      	left: 222px;
	      	bottom:123px;
			-webkit-animation:steps4 750ms step-end infinite;
	      }
	      .steps5 {
	      	width:45px;
	      	height: 55px;
	      	left: 262px;
	      	bottom:116px;
			-webkit-animation:steps5 750ms step-end infinite;
	      }
	      .steps6 {
	      	width:45px;
	      	height: 55px;
	      	left: 316px;
	      	bottom:96px;
			-webkit-animation:steps6 450ms step-end infinite;
	      }
	      .steps7 {
	      	width:45px;
	      	height: 112px;
			-webkit-animation:steps7 2.5s step-end infinite;
	      }
	      
	      .steps9 {
	      	width:45px;
	      	height: 37px;
	      	left: 14px;
	      	bottom:108px;
			-webkit-animation:steps9 550ms step-end infinite;
	      }
	      @-webkit-keyframes steps1 {
	      	 0% {
				 background-position: 0 0;
	      	 }
	      	 10% {
				 background-position: -85px 0;
	      	 }
	      	 20% {
				 background-position: -170px 0;
	      	 }
	      	 30% {
				 background-position: -255px 0;
	      	 }
	      	 40% {
				 background-position: -340px 0;
	      	 }
	      	 50% {
				 background-position: -425px 0;
	      	 }
	      	 60% {
				 background-position: 0 -114px;
	      	 }
	      	 70% {
				 background-position: -85px -114px;
	      	 }
	      	 80% {
				 background-position: -170px -114px;
	      	 }
	      	 90% {
				 background-position: -255px -114px;
	      	 }
	      	 100% {
				 background-position: -340px -114px;
	      	 }
	      }
	      @-webkit-keyframes steps2 {
	      	 0% {
				 background-position: 0 -230px;
	      	 }
	      	 20% {
				 background-position: -45px -230px;
	      	 }
	      	 40% {
				 background-position: -90px -230px;
	      	 }
	      	 60% {
				 background-position: -135px -230px;
	      	 }
	      	 80% {
				 background-position: -180px -230px;
	      	 }
	      	 100% {
				 background-position: -225px -230px;
	      	 }
	      }
	      @-webkit-keyframes steps3 {
	      	 0% {
				 background-position: 0 -290px;
	      	 }
	      	 50% {
				 background-position: -45px -290px;
	      	 }
	      	 100% {
				 background-position: -90px -290px;
	      	 }
	      }
	      @-webkit-keyframes steps4 {
	      	 0% {
				 background-position: 0 -342px;
	      	 }
	      	 16.666% {
				 background-position: -45px -342px;
	      	 }
	      	 32.332% {
				 background-position: -90px -342px;
	      	 }
	      	 49.998% {
				 background-position: -135px -342px;
	      	 }
	      	 66.664% {
				 background-position: -180px -342px;
	      	 }
	      	 83.333% {
				 background-position: -225px -342px;
	      	 }
	      	 100% {
				 background-position: -270px -342px;
	      	 }
	      }
	      @-webkit-keyframes steps5 {
	      	 0% {
				 background-position: 0 -441px;
	      	 }
	      	 16.666% {
				 background-position: -45px -441px;
	      	 }
	      	 32.332% {
				 background-position: -90px -441px;
	      	 }
	      	 49.998% {
				 background-position: -135px -441px;
	      	 }
	      	 66.664% {
				 background-position: -180px -441px;
	      	 }
	      	 83.333% {
				 background-position: -225px -441px;
	      	 }
	      	 100% {
				 background-position: -270px -441px;
	      	 }
	      }
	      @-webkit-keyframes steps6 {
	      	 0% {
				 background-position: 0 -544px;
	      	 }
	      	 25% {
				 background-position: -45px -544px;
	      	 }
	      	 50% {
				 background-position: -90px -544px;
	      	 }
	      	 75% {
				 background-position: -135px -544px;
	      	 }
	         100% {
				 background-position: -180px -544px;
	      	 }
	      }

	      @-webkit-keyframes steps7 {
	      	 0% {
				 background-position: 0 -635px;
				 -webkit-transform:translate(118px,275px);
	      	 }
	      	 6.666% {
				 background-position: -45px -635px;
				 -webkit-transform:translate(138px,275px);
	      	 }
	      	 13.32% {
				 background-position: -90px -635px;
				 -webkit-transform:translate(175px,275px);
	      	 }
	      	 19.98% {
				 background-position: -135px -635px;
				 -webkit-transform:translate(219px,275px);
	      	 }
	      	 26.64% {
				 background-position: -180px -635px;
				 -webkit-transform:translate(245px,282px);
	      	 }
	      	 33.30% {
				 background-position: -225px -635px;
				 -webkit-transform:translate(268px,287px);
	      	 }
	      	 39.96% {
				 background-position: -225px -635px;
				 -webkit-transform:translate(283px,287px);
	      	 }
	      	 46.62% {
				 background-position: -270px -635px;
				 -webkit-transform:translate(283px,287px);
	      	 }
	      	 53.28% {
				 background-position: -315px -635px;
				 -webkit-transform:translate(283px,289px);
	      	 }


	      	 59.94% {
				 background-position: -360px -635px;
				 -webkit-transform:translate(275px,178px);
	      	 }
	      	 66.60% {
				 background-position: -405px -635px;
				 -webkit-transform:translate(250px,168px);
	      	 }


	      	 73.26% {
				 background-position: -450px -635px;
				 -webkit-transform:translate(205px,168px);
	      	 }


	      	 79.92% {
				 background-position: -495px -635px;
				 -webkit-transform:translate(185px,178px);
	      	 }
	      	 86.58% {
				 background-position: -540px -635px;
				 -webkit-transform:translate(155px,200px);
	      	 }


	      	 93.24% {
				 background-position: -585px -635px;
				 -webkit-transform:translate(115px,265px);
	      	 }
	      	 100% {
				 background-position: -630px -635px;
				 -webkit-transform:translate(110px,275px);
	      	 }
	      }
	      @-webkit-keyframes steps9 {
	      	 0% {
				 background-position: 0 -825px;
	      	 }
	      	 50%,100% {
				 background-position: -45px -825px;
	      	 }
	      }
	</style>
</head>
<body>
	<div class="mod">
		 <div class="steps1"></div>
		 <div class="steps2"></div>
		 <div class="steps3"></div>
		 <div class="steps4"></div>
		 <div class="steps5"></div>
		 <div class="steps6"></div>
		 <div class="steps7"></div>
		 <div class="steps9"></div>
	</div>

<!--天天爱消除启动启动画 。。。尼玛那兔子最搞人-->
</body>
</html>